<template>
	<view class="starBG">
		<view class="moon"></view>
		<view class="star" v-for="(item, index) in stars" :key="index"
		:style="{top: item.top + 'rpx', left: item.left + 'rpx', 'animation-delay': item.delay + 's'}"></view>
	</view>
</template>

<script>
	import stars from '../../utils/star_list.js'
	export default {
		data() {
			return {
				stars
			}
		}
	}
</script>

<style scoped>
	.starBG{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: -3;
		background-image: linear-gradient(to bottom , #1b2947, #2b3152, #3b385d, #4c4067, #5d4771);
	}
	.moon{
		position: fixed;
		right: 30rpx;
		top: 30rpx;
		width: 250rpx;
		height: 250rpx;
		z-index: -1;
		border-radius: 50%;
		box-shadow: 0 0 30rpx #ffeaa7;
		background-color: #ffeaa7;
	}
	.star{
		width: 0;
		height: 0;
		position: fixed;
		opacity: 0;
		z-index: -2;
		animation: star_fall 1.5s linear infinite;
	}
	.star::after{
		content: '';
		width: 0;
		height: 0;
		border: 8rpx solid transparent;
		border-left-width: 260rpx;
		border-left-color: rgba(255, 255, 255, .7);
		position: absolute;
		transform: rotate(-45deg) translate3d(1px, 3px, 0);
		transform-origin: 0% 100%;
		border-radius: 2px 0 0 2px;
	}
	
	
	
	@keyframes star_fall{
		0%{
			opacity: 0;
			transform: scale(0.7) translate3d(0, 0, 0);
		}
		50%{
			opacity: .7;
			transform: scale(0.7) translate3d(-300rpx, 300rpx, 0);
		}
		100%{
			opacity: 0;
			transform: scale(0.7) translate3d(-600rpx, 600rpx, 0);
		}
	}
</style>
